<template>
  <view>
    <image src="/static/images/caidan/home_header.png" mode="widthFix" style="width: 100%;"></image>
    <view class="content relative">
      <view class="touru_box u-f-ajc relative">
        <view class="absolute abso_box u-f-ajc">奖池{{res.amount}}</view>
        <view>已投入</view>
        <u-icon name="play-right-fill" size="24"></u-icon>
        <view class="item u-f-ajc u-f-column" v-for="(item, index) in touruList" :key="index">
          <view style="font-size: 26rpx;">{{item.name}}</view>
          <view>{{item.num}}</view>
        </view>
      </view>

      <image src="/static/images/caidan/daojishi_title.png" mode="widthFix" style="width: 100%;margin: 40rpx 0;">
      </image>
      <view class="daojishi_box u-f-ajc">
        <view class="count_num u-f-ajc" v-for="(item, index) in time" :key="index">{{item}}</view>
        <view class="miao">秒</view>
      </view>

      <view class="shadow"></view>
      <view class="list_box">
        <view class="list relative">
          <!-- <view class="absolute abso_box u-f-ajc">兑换纪录</view> -->
          <view class="item title_box u-f-ac u-f-jsb">
            <view style="width: 35%">投入号码</view>
            <view class="time u-f-ajc" style="width: 50%">时间</view>
            <view style="width: 25%;text-align: right;">颜色</view>
          </view>
          <scroll-view scroll-y style="height: 560rpx;">
            <view class="item u-f-ac u-f-jsb" v-for="(item, index) in last20" :key="index">
              <view style="width: 35%">{{item.mobile | secrecyMobile}}</view>
              <view class="time t-a-c" style="width: 40%">
                {{Number(item.pool_time) / 1000 | unixToDate('yyyy-MM-dd hh:mm:ss.S')}}
              </view>
              <view style="width: 25%;justify-content: flex-end;" class="u-f-ac">
                <image :src="item.image" mode="widthFix"></image>
                <view style="margin-left: 10rpx;">{{item.name}}</view>
              </view>
            </view>
          </scroll-view>

          <view class="zhuanchu_box">
            <view class="choose_box u-f-ac u-f-jsb" @click="showSelect1=true">
              <view>{{items1.label || '选择颜色'}}</view>
              <view>
                <u-icon name="arrow-down-fill" color="#E91536"></u-icon>
              </view>
            </view>
          </view>
          <view class="button_box u-f-ajc" style="margin-top: 0;" @click="putCrazyInPools">投入奖池</view>
        </view>
      </view>

      <view class="shadow" style="margin-top: 50rpx;"></view>
      <view class="list_box">
        <view class="list relative" style="margin-top: -70rpx;">
          <view class="absolute abso_box u-f-ajc">奖池彩蛋</view>
          <view class="item title_box u-f-ac u-f-jsb">
            <view class="u-f-ajc">持有彩蛋</view>
            <view class="u-f-ajc">本期投入数量</view>
            <view class="u-f-ajc">投入纪录</view>
          </view>
          <view class="item u-f-ac u-f-jsb" v-for="(item, index) in chiyouList" :key="index">
            <view class="u-f-ajc">
              <image :src="item.image" mode="widthFix" style="width: 46rpx;margin-right: 20rpx;">
              </image>
              <view>{{item.name}}:{{item.num}}</view>
            </view>
            <view class="u-f-ajc">{{item.touru}}</view>
            <view class="u-f-ajc">
              <view class="buttons u-f-ajc" @click="$u.route(`/mine-module/caidan/tourujilu`)">投入纪录</view>
            </view>
          </view>
          <view class="button_box u-f-ajc" @click="$u.route(`/mine-module/caidan/duihuancaidan`)">兑换彩蛋</view>
        </view>
      </view>

    </view>

    <u-select v-model="showSelect1" value-name="id" label-name="name" :list="eggList"
      @confirm="(e) => confirm(e, 'items1')"></u-select>

    <caidanTbbar :tabbar="0"></caidanTbbar>

  </view>
</template>

<script>
  let timer;
  let timer2;
  import * as API_Mall from '@/api/malls.js';
  import caidanTbbar from './caidan_tabbar.vue'
  export default {
    components: {
      caidanTbbar
    },
    data() {
      return {
        res: {},
        time: '',

        eggList: [],
        touruList: [],
        last20: [],
        chiyouList: [],

        items1: {},
        showSelect1: false,

        countDown: 0,
      }
    },
    onShow() {
      this.getCrazyAnnouncement()
    },
    onHide() {
      clearInterval(timer)
      clearInterval(timer2)
    },
    onUnload() {
      clearInterval(timer)
      clearInterval(timer2)
    },
    methods: {
      async getCrazyAnnouncement() {
        await this.getCrazyEgg()
        let res = await API_Mall.getCrazyAnnouncement()
        this.res = res

        clearInterval(timer)
        clearInterval(timer2)
        let now = new Date().getTime() / 1000
        let time = Number(res.rest_mill_seconds) / 1000 - (Number(now) - Number(res.start))
        console.log('time1111:', time)
        console.log('rest_mill_seconds:', Number(res.rest_mill_seconds) / 1000)
        console.log('now:', now)
        console.log('start:', res.start)
        console.log('end:', res.end)
        this.time = time.toFixed(0)
        if (Number(this.time) <= 0) {
          this.time = '0'
        } else if (Number(this.time) >= (Number(res.rest_mill_seconds) / 1000)) {
          this.time = (Number(res.rest_mill_seconds) / 1000).toString()
        }
        console.log('time222:', this.time)

        if (Number(now) >= Number(res.start) && Number(now) < Number(res.end)) {
          console.log('在这个区间才会倒数！')
          timer = setInterval(() => {
            let time = Number(this.time) - 1
            this.time = time.toString()
            if (Number(this.time) <= 0) {
              this.time = '0'
              clearInterval(timer)
              clearInterval(timer2)
            }
          }, 1000)
        } else if (Number(now) < Number(res.start)) {
          this.countDown = Number(res.start) - Number(now)
          timer2 = setInterval(() => {
            this.countDown = Number(this.countDown) - 1
            console.log('还多久开始：', this.countDown)
            if (Number(this.countDown) <= 0) {
              clearInterval(timer)
              clearInterval(timer2)
              this.getCrazyAnnouncement()
            }
          }, 1000)
        }

        if (Number(now) > Number(res.end)) {
          console.log('停止倒计时', now, res.end)
          time = Number(res.rest_mill_seconds) / 1000 - (Number(res.end) - Number(res.start))
          this.time = time.toFixed(0)
          // if (Number(this.time) <= 0) {
          // this.time = '0'
          clearInterval(timer)
          clearInterval(timer2)
          //  }
        }

        console.log(this.time)



        // 已投入蛋的数量
        let arr = []
        for (let i in res.eggs) {
          let obj = {
            name: this.eggList.find(item => item.id == i).name,
            num: res.eggs[i]
          }
          arr.push(obj)
        }
        this.touruList = arr
        console.log('已投入彩蛋touruList：', this.touruList)

        await this.getCrazyInfo()

        // 投入纪录
        let arr2 = []
        for (let i of res.last20) {
          let obj = {
            name: '',
            image: '',
            egg_id: i.egg_id,
            mobile: i.mobile,
            pool_time: i.pool_time,
          }
          obj.name = this.eggList.find(item => item.id == i.egg_id).name
          obj.image = this.eggList.find(item => item.id == i.egg_id).thumbnail
          arr2.push(obj)
        }
        this.last20 = arr2
        console.log('投入纪录last20：', this.last20)
      },
      async getCrazyEgg() {
        let res = await API_Mall.getCrazyEgg()
        this.eggList = res
      },
      async getCrazyInfo() {
        let res = await API_Mall.getCrazyInfo()
        // 持有彩蛋
        let arr = []
        for (let i in res) {
          if (i.length == 2 && i.indexOf('e') != -1) {
            let obj = {
              name: '',
              image: '',
              id: '',
              touru: '',
              num: res[i],
            }
            if (i == 'ge') obj.name = '绿蛋'
            if (i == 're') obj.name = '红蛋'
            if (i == 'ye') obj.name = '黄蛋'
            if (i == 'we') obj.name = '白蛋'
            if (i == 'be') obj.name = '黑蛋'

            if (this.eggList.findIndex(item => item.name == obj.name) != -1) obj.image = this.eggList.find(item =>
              item.name == obj.name).thumbnail
            if (this.eggList.findIndex(item => item.name == obj.name) != -1) obj.id = this.eggList.find(item => item
              .name == obj.name).id
            // if (this.touruList.findIndex(item => item.name == obj.name) != -1) obj.touru = this.touruList.find(item =>
            //   item.name == obj.name).num
            if (this.res && this.res.my_eggs && this.res.my_eggs.length) obj.touru = this.res.my_eggs[obj.id]
            arr.push(obj)
          }
        }
        this.chiyouList = arr.sort((a, b) => a.id - b.id)
        console.log('持有彩蛋纪录chiyouList：', this.chiyouList)
      },

      confirm(e, name) {
        this[name] = e[0]
      },
      putCrazyInPools() {
        if (!this.items1.label) return this.$u.toast('请选择要投入的彩蛋')
        uni.showModal({
          title: '温馨提示',
          content: `确定要把${this.items1.label}投入奖池吗？`,
          confirmText: '确定投入',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              await API_Mall.putCrazyInPools({
                eggId: this.items1.value,
                poolsId: this.res.pools_id,
              })
              this.$u.toast('投入成功！')
              this.getCrazyAnnouncement()
            }
          }
        })
      },


    },
  }
</script>

<style lang="scss">
  page {
    background-color: #E91536;
  }

  .content {
    padding: 50rpx 30rpx 200rpx;

    .touru_box {
      width: 100%;
      height: 140rpx;
      background-color: #FD563F;
      border-radius: 40rpx;
      border: 2px solid #FFFCF0;
      color: #FFF;
      font-weight: 700;
      padding-top: 30rpx;

      view {
        font-size: 32rpx;
      }

      .item {
        margin-left: 20rpx;
      }

      .abso_box {
        width: 450rpx;
        height: 100rpx;
        background: url(/static/images/caidan/jifenjilu.png) no-repeat 0 0;
        background-size: 100% 100rpx;
        color: #E91536;
        font-weight: 700;
        top: -60rpx;
        left: 50%;
        margin-left: -225rpx;
      }
    }

    .daojishi_box {
      margin-bottom: 60rpx;
      color: #FFF;

      .count_num {
        width: 90rpx;
        height: 90rpx;
        background-color: #FD563F;
        border-radius: 6rpx;
        border: 1px solid #FFFCF0;
        font-weight: 700;
        margin: 0 10rpx;
        font-size: 60rpx;
      }

      .miao {
        font-size: 40rpx;
        margin-top: 20rpx;
        margin-left: 10rpx;
      }
    }


    .shadow {
      width: 100%;
      height: 120rpx;
      background: #C6112D;
      border-radius: 30rpx;
    }

    .list_box {
      width: 100%;
      padding: 0 10rpx;
    }

  }

  .list {
    margin-top: -90rpx;
    width: 100%;
    background: #FFFCF0;
    border: 1px solid #FF6264;
    box-shadow: 0px 0px 10rpx 2rpx #FFE478;
    border-radius: 30rpx;
    padding: 40rpx 20rpx;

    .abso_box {
      width: 250rpx;
      height: 66rpx;
      background: url(/static/images/caidan/jifenjilu.png) no-repeat 0 0;
      background-size: 100% 66rpx;
      color: #E91536;
      font-weight: 700;
      top: -46rpx;
      left: 50%;
      margin-left: -125rpx;
    }

    .item {
      color: #8A3D06;
      padding: 16rpx 20rpx;
      border-bottom: 1px dashed #ccc;

      >view {
        width: 33.3%;
      }

      image {
        width: 30rpx;
      }
    }

    .title_box {
      background-color: #FFEBC2;
      // background-color: red;
      border-radius: 50rpx;
      padding: 8rpx 20rpx;
      font-weight: 700;
      border-bottom: none;
      margin-bottom: 10rpx;
    }

    .buttons {
      width: 150rpx;
      height: 56rpx;
      color: #FFF;
      background: linear-gradient(0deg, #FB3F5F, #FD7B6C);
      border-radius: 50rpx;
      font-size: 26rpx;
    }

    .button_box {
      width: 100%;
      height: 90rpx;
      background: linear-gradient(0deg, #FB3F5F, #FD7B6C);
      border-radius: 16rpx;
      margin-top: 50rpx;
      font-weight: 700;
      color: #FFF;
      font-size: 30rpx;
    }
  }

  .zhuanchu_box {
    width: 100%;
    background: #FD563F;
    border: 1px solid rgba(255, 252, 240, 0.61);
    border-radius: 30rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    color: #E91536;

    .choose_box {
      padding: 16rpx 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      font-size: 26rpx;
    }

    .button_box {
      width: 100%;
      height: 74rpx;
      background: linear-gradient(180deg, #FFFCF0, #F9D792);
      border-radius: 30rpx;
      font-weight: 700;
    }
  }
</style>
